<!doctype html>
<html lang="en" itemscope itemtype="http://schema.org/Product">
	<head>
		<meta charset="utf-8">
		<meta name="author" content="Sindre Sorhus">
		<meta name="description" content="JavaScript Fullscreen API demo">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta itemprop="name" content="screenfull.js">
		<meta itemprop="description" content="Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have too.">
		<title>screenfull.js demo</title>
		<style>
		html {
			font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
			padding: 30px 10px 0 0;
			font-size: 20px;
			line-height: 1.4;
			color: #737373;
			background: #f0f0f0;
			-webkit-font-smoothing: antialiased;
		}

		hr {
			border: none;
			border-top: 1px solid #e6e6e6;
			margin: 20px 0;
		}

		a {
			color: #666;
		}

		h1 {
			margin: 0;
			font-size: 40px;
			text-align: center;
		}

		h1 span {
			color: #bbb;
		}

		ul {
			padding: 0 0 0 40px;
			margin: 1em 0;
		}

		button {
			font-size: 13px;
		}

		nav {
			margin: 0 auto;
		}

		.container {
			width: 500px;
			margin: 0 auto;
		}

		#repo-link {
			text-align: center;
			text-decoration: none;
			display: block;
			position: absolute;
			top: 20px;
			left: 20px;
		}

		#social {
			margin: 10px auto;
			text-align: center;
		}

		#container {
			width: 500px;
			padding: 30px 20px;
			margin: 0 auto 50px auto;
			background: #fcfcfc;
			text-align: center;
			border: 1px solid #b3b3b3;
			border-radius: 4px;
			box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff;
		}

		#container ul {
			padding: 0;
			margin: 40px 0 0 0;
			list-style: none;
		}

		#demo-img {
			width: 100%;
			height: auto;
		}

		#demo-img,
		#demo-video {
			cursor: pointer;
		}

		header p {
			font-size: 17px;
		}
		</style>
	</head>
	<body>
		<a id="repo-link" href="https://github.com/sindresorhus/screenfull.js">⬅ Back to the repo</a>
		<div id="social" class="container">
			<a href="https://twitter.com/share" class="twitter-share-button" data-count="none" data-text="screenfull.js - Simple wrapper for cross-browser usage of the Fullscreen API" data-via="sindresorhus">Tweet</a>
			<div class="g-plusone" data-size="medium" data-annotation="none" data-href="https://github.com/sindresorhus/screenfull.js"></div>
		</div>
		<section id="container" class="container">
			<header>
				<h1>screenfull<span>.js</span></h1>
				<p>Simple wrapper for cross-browser usage of the JavaScript <a href="https://developer.mozilla.org/en/DOM/Using_full-screen_mode">Fullscreen API</a>, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have too.</p>
			</header>
			<hr>
			<section>
				<p>Try out the Fullscreen API</p>
				<button id="request">Request</button>
				<button id="exit">Exit</button>
				<button id="toggle">Toggle</button>
				<button id="request2">Request document</button>
			</section>
			<section>
				<ul>
					<li id="supported"></li>
					<li id="status"></li>
					<li id="element"></li>
				</ul>
			</section>
			<input autofocus placeholder="Keyboard test">
			<hr>
			<section>
				<p>Click the image to make it fullscreen</p>
				<img width="500" height="206" id="demo-img" src="https://sindresorhus.com/img/slideshow/4.jpg">
			</section>
		</section>
		<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
		<script type="text/javascript">
		(function() {
			var po = document.createElement('script'); po.async = true;
			po.src = 'https://apis.google.com/js/plusone.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
		})();
		</script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="src/screenfull.js"></script>
		<script>
		$(function () {
			$('#supported').text('Supported/allowed: ' + !!screenfull.enabled);

			if (!screenfull.enabled) {
				return false;
			}

			$('#request').click(function () {
				screenfull.request($('#container')[0]);
				// does not require jQuery, can be used like this too:
				// screenfull.request(document.getElementById('container'));
			});

			$('#exit').click(function () {
				screenfull.exit();
			});

			$('#toggle').click(function () {
				screenfull.toggle($('#container')[0]);
			});

			$('#request2').click(function () {
				screenfull.request();
			});

			$('#demo-img').click(function () {
				screenfull.toggle(this);
			});

			function fullscreenchange() {
				var elem = screenfull.element;

				$('#status').text('Is fullscreen: ' + screenfull.isFullscreen);

				if (elem) {
					$('#element').text('Element: ' + elem.localName + (elem.id ? '#' + elem.id : ''));
				}

				if (!screenfull.isFullscreen) {
					$('#external-iframe').remove();
					document.body.style.overflow = 'auto';
				}
			}

			document.addEventListener(screenfull.raw.fullscreenchange, fullscreenchange);

			// set the initial values
			fullscreenchange();
		});
		</script>
		<script>
			var _gaq=[['_setAccount','UA-25562592-1'],['_trackPageview'],['_trackPageLoadTime']];
			(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
			g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
			s.parentNode.insertBefore(g,s)}(document,'script'));
		</script>
	</body>
</html>
